<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            transition: all .5s linear;
        }
        img:nth-of-type(1):hover{
            transform: rotate(90deg);
            transform: rotate(270deg);
            transform: rotate(-270deg);
        }
        img:nth-of-type(2):hover{
            transform: skew(90deg);
            transform: skew(-90deg);
            transform: skewY(40deg);
            transform: skewX(40deg);
            transform: skew(40deg, -95deg);
        }
        img:nth-of-type(3):hover{
            transform: scale(0);
            transform: scale(2);
            transform: scale(-2);
        }
        img:nth-of-type(4):hover{
            transform: translate(-50%, -50%);
            transform: translate(50%, 50%);
        }
    </style>
</head>
<body>
    <!-- 
        1. 变形
            transform:none          不变形,默认
                      rotate        旋转
                      skew          扭曲  (90*基数 就扭曲到消失)
                      scale         中心缩放    1:本身大小
                                               >1:放大
                                               <1:缩小(可以为负数)
                      translate     位移  (基于自身开始位移)
     -->
    <img src="../resource/10.jpg" width="200"><br>
    <img src="../resource/11.jpg" width="200"><br>
    <img src="../resource/12.jpg" width="200"><br>
    <img src="../resource/13.jpg" width="200">
</body>
</html>